<template>
  <div class="righttop">
    <div class="menusBox">
      <div
        :class="nowPath == item.fullPath ? 'selMenu bgcNow' : 'selMenu bgc'"
        @click="jumpPage(item.fullPath)"
        v-for="(item, i) in $store.state.topMenus"
        :key="i"
      >
        {{ item.title }}
        <div
          class="delBtn iconfont icon-guanbi"
          @click.stop="delSelMenu(item, i)"
        ></div>
      </div>
    </div>
    <div
      v-if="$store.state.topMenus.length > 1"
      class="clearAll iconfont icon-guanbi"
      title="关闭其他标签"
      @click="clearOther"
    ></div>
  </div>
</template>

<script>
import local from "@/utils/local";
import MoreTabs from "@/components/moreTabs.vue";
import vm from "../main";
export default {
  components: {
    MoreTabs,
  },
  data() {
    return {
      nowPath: "",
      lastPath: "",
    };
  },
  methods: {
    // 过滤标签
    filterMenu(selObj) {
      let flag = -1;
      this.$store.state.topMenus.forEach((item, i) => {
        if (item.fullPath == selObj.fullPath) {
          flag = i;
          return flag;
        }
      });
      return flag;
    },
    // 跳转页面
    jumpPage(val) {
      this.$router.push({
        path: val,
      });
    },
    // 移除某个标签
    delSelMenu(item, i) {
      /**=======================清除keepAlive缓存核心代码========================= */
      let arr = vm.$children[0]._vnode.children[0].componentInstance.$children;
      let l2 = this.$store.state.topMenus.length;
      arr.forEach((item2, i) => {
        if (
          item2.$vnode.data.key == this.$store.state.topMenus[l2 - 1].fullPath
        ) {
          // 删除cache中的记录
          for (let key in item2.$vnode.parent.componentInstance.cache) {
            if (item.fullPath == key) {
              delete item2.$vnode.parent.componentInstance.cache[key];
            }
          }
          // 因为在cache和keys中都有记录，所以保险起见将keys中的记录也删除(没删这个也一样的，试了)
          item2.$vnode.parent.componentInstance.keys.forEach((item3, i) => {
            if (item.fullPath == item3) {
              item2.$vnode.parent.componentInstance.keys.splice(i, 1);
            }
          });
        }
      });
      /**=======================END========================= */
      this.$store.commit("DELSELMENUS", i);
      let l = this.$store.state.topMenus.length;
      /**=============叉掉其他页面，跳回上次页面；否则不跳转只删除============ */
      if (item.fullPath == this.$route.fullPath) {
        let jumpIndex = i > 0 ? l - 1 : 0;
        this.$store.state.topMenus.forEach((item, i2) => {
          if (item.fullPath == this.lastPath.fullPath) {
            jumpIndex = i2;
          }
        });
        this.$router.push({
          path: this.$store.state.topMenus[jumpIndex].fullPath,
        });
      } 
      /**===================================== */
    },
    // 移除其他缓存标签
    clearOther() {
      let arr = vm.$children[0]._vnode.children[0].componentInstance.$children;
      let l2 = this.$store.state.topMenus.length;
      arr.forEach((item2, i) => {
        if (
          item2.$vnode.data.key == this.$store.state.topMenus[l2 - 1].fullPath
        ) {
          item2.$vnode.parent.componentInstance.cache = {};
          item2.$vnode.parent.componentInstance.keys = [];
        }
      });
      let selObj = {
        path: this.$route.fullPath,
        title: this.$route.meta.title,
        fullPath: this.$route.fullPath,
      };
      this.$store.commit("ONLYSAVEONE", selObj);
    },
  },
  created() {
    this.nowPath = this.$route.path;
    let selObj = {
      path: this.$route.fullPath,
      title: this.$route.meta.title,
      fullPath: this.$route.fullPath,
    };
    if (this.filterMenu(selObj) == -1) {
      this.$store.state.topMenus.push(selObj);
    }
  },
  // 监听
  watch: {
    // 解决面包屑刷新，监听hash值的变化，变化了就再计算一次
    $route: {
      handler: function (val, oldVal) {
        this.nowPath = val.fullPath;
        let selObj = {
          path: val.path,
          title: val.meta.title,
          fullPath: val.fullPath,
        };
        let lastObj = {
          path: oldVal.path,
          title: oldVal.meta.title,
          fullPath: oldVal.fullPath,
        };
        this.lastPath = lastObj;
        if (this.filterMenu(selObj) == -1) {
          this.$store.state.topMenus.push(selObj);
        }
        /**========记录上次页面，标签中有才记录======= */
        // this.$store.state.topMenus.forEach((item, i2) => {
        //   if (item.fullPath == selObj.fullPath) {
        //     this.lastPath = selObj;
        //     console.log(1111);
        //   }
        // });
        /**====================================== */
      },
      // 深度观察监听
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
.righttop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  box-sizing: border-box;
  position: relative;
  .clearAll {
    width: 20px;
    height: 28px;
    font-size: 18px;
    color: rgb(218, 32, 32);
    line-height: 24px;
    position: absolute;
    top: 10px;
    left: 0;
    cursor: pointer;
    display: none;
  }
}
.righttop:hover {
  background-color: rgb(233, 243, 252);
  .clearAll {
    display: block;
  }
}
.menusBox {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  > .selMenu {
    position: relative;
    box-sizing: border-box;
    height: 28px;
    line-height: 24px;
    text-align: center;
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 3px;
    margin-right: 5px;
    cursor: pointer;
    .delBtn {
      position: absolute;
      width: 14px;
      height: 14px;
      font-size: 10px;
      line-height: 14px;
      top: -5px;
      right: -5px;
      color: rgb(128, 120, 120);
      font-size: 14px;
      display: none;
    }
  }
  > .selMenu:hover .delBtn {
    display: block;
  }
  .bgcNow {
    background-color: #53a0ff;
    color: #fff;
  }
  .bgc {
    background-color: #eef1f6;
    color: #444;
    border: 0.5px solid #ddd;
  }
}
</style>